<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
        }
        .nav-item:hover {
            background-color: rgba(64, 158, 255, 0.1);
        }
        .active-nav {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <!-- 左侧logo -->
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/40x40?text=消防" alt="Logo" class="h-10 w-10">
                        <span class="ml-2 text-xl font-bold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    
                    <!-- 中间导航菜单 -->
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item active-nav px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-brain mr-1"></i> AI检索功能
                        </a>
                        <a href="report-generator.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-dashboard.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                    </nav>
                    
                    <!-- 右侧用户信息 -->
                    <div class="flex items-center space-x-4">
                        <a href="personal-center.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-user-circle"></i> 个人中心
                        </a>
                        <a href="login.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                        <a href="register.html" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主体内容区 - 默认显示检索页面 -->
        <main class="container mx-auto px-4 py-6">
            <!-- 检索框 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <div class="flex flex-col">
                    <div class="flex items-center mb-4">
                        <div class="relative flex-1">
                            <input type="text" placeholder="请输入检索关键词..." 
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <button class="ml-4 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
                            <i class="fas fa-search mr-1"></i> 检索
                        </button>
                    </div>
                    
                    <!-- 检索选项 -->
                    <div class="flex flex-wrap gap-4">
                        <div class="flex items-center">
                            <span class="text-gray-700 font-medium mr-2">检索范围:</span>
                            <div class="space-x-3">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="searchScope" class="form-radio text-blue-500" checked>
                                    <span class="ml-1">全文</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="searchScope" class="form-radio text-blue-500">
                                    <span class="ml-1">标题</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="searchScope" class="form-radio text-blue-500">
                                    <span class="ml-1">摘要</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="searchScope" class="form-radio text-blue-500">
                                    <span class="ml-1">关键词</span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <span class="text-gray-700 font-medium mr-2">分类:</span>
                            <div class="space-x-2">
                                <button class="px-3 py-1 rounded-full bg-blue-500 text-white">全部</button>
                                <button class="px-3 py-1 rounded-full bg-gray-200 hover:bg-blue-100 text-gray-700">消防法律法规</button>
                                <button class="px-3 py-1 rounded-full bg-gray-200 hover:bg-blue-100 text-gray-700">火调报告</button>
                                <button class="px-3 py-1 rounded-full bg-gray-200 hover:bg-blue-100 text-gray-700">政府文件</button>
                                <button class="px-3 py-1 rounded-full bg-gray-200 hover:bg-blue-100 text-gray-700">消防安全</button>
                                <button class="px-3 py-1 rounded-full bg-gray-200 hover:bg-blue-100 text-gray-700">消防设备</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 高级筛选 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">高级筛选</h3>
                    <button class="text-blue-500 flex items-center">
                        <i class="fas fa-filter mr-1"></i> 更多筛选
                    </button>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
                        <div class="flex items-center space-x-2">
                            <input type="date" class="px-3 py-2 border border-gray-300 rounded-md w-full">
                            <span>至</span>
                            <input type="date" class="px-3 py-2 border border-gray-300 rounded-md w-full">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">地区选择</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            <option>全部地区</option>
                            <option>北京市</option>
                            <option>上海市</option>
                            <option>广东省</option>
                            <option>江苏省</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">事故类型</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            <option>全部类型</option>
                            <option>电气火灾</option>
                            <option>易燃品火灾</option>
                            <option>厨房火灾</option>
                            <option>工业火灾</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- 检索结果 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">检索结果 <span class="text-blue-500">(123)</span></h3>
                    <div class="flex items-center">
                        <span class="mr-2 text-sm text-gray-600">排序:</span>
                        <select class="px-3 py-1 border border-gray-300 rounded-md">
                            <option>相关度</option>
                            <option>最新发布</option>
                            <option>最多引用</option>
                            <option>热度排序</option>
                        </select>
                    </div>
                </div>
                
                <!-- 结果列表 -->
                <div class="space-y-4">
                    <!-- 结果项1 -->
                    <div class="border-b border-gray-200 pb-4">
                        <h4 class="text-xl font-medium text-blue-600 mb-2">
                            <a href="detail.html">建筑材料阻燃性能测试标准规范（2023版）</a>
                        </h4>
                        <p class="text-gray-700 mb-2 line-clamp-2">本规范规定了建筑材料阻燃性能的测试方法、评定标准和分级要求，适用于各类建筑装饰材料的燃烧性能检测评估。标准中详细描述了测试设备、测试条件、取样要求以及结果分析方法...</p>
                        <div class="flex flex-wrap text-sm text-gray-600 gap-3">
                            <span><i class="fas fa-user mr-1"></i> 国家消防标准委员会</span>
                            <span><i class="fas fa-building mr-1"></i> 应急管理部消防救援局</span>
                            <span><i class="fas fa-calendar mr-1"></i> 2023-05-15</span>
                            <span><i class="fas fa-fire mr-1"></i> 热度: 1280</span>
                            <span class="text-blue-500"><i class="fas fa-tag mr-1"></i> 消防法律法规</span>
                        </div>
                        <div class="flex mt-2">
                            <a href="detail.html" class="text-blue-500 hover:text-blue-700 mr-4">
                                <i class="fas fa-eye mr-1"></i> 查看
                            </a>
                            <a href="#" class="text-gray-500 hover:text-blue-500">
                                <i class="fas fa-bookmark mr-1"></i> 订阅
                            </a>
                        </div>
                    </div>
                    
                    <!-- 结果项2 -->
                    <div class="border-b border-gray-200 pb-4">
                        <h4 class="text-xl font-medium text-blue-600 mb-2">
                            <a href="detail.html">某五星级酒店厨房燃气泄漏火灾事故调查报告</a>
                        </h4>
                        <p class="text-gray-700 mb-2 line-clamp-2">2022年8月15日，某五星级酒店厨房发生燃气泄漏导致的火灾事故，造成2人轻微烧伤，经济损失约50万元。经调查，事故主要原因为燃气管道接口松动，同时安全检查不到位，导致泄漏气体遇明火引发火灾...</p>
                        <div class="flex flex-wrap text-sm text-gray-600 gap-3">
                            <span><i class="fas fa-user mr-1"></i> 市消防救援支队特勤大队</span>
                            <span><i class="fas fa-building mr-1"></i> 南京市消防救援支队</span>
                            <span><i class="fas fa-calendar mr-1"></i> 2022-08-30</span>
                            <span><i class="fas fa-fire mr-1"></i> 热度: 965</span>
                            <span class="text-green-500"><i class="fas fa-tag mr-1"></i> 火调报告</span>
                        </div>
                        <div class="flex mt-2">
                            <a href="detail.html" class="text-blue-500 hover:text-blue-700 mr-4">
                                <i class="fas fa-eye mr-1"></i> 查看
                            </a>
                            <a href="#" class="text-gray-500 hover:text-blue-500">
                                <i class="fas fa-bookmark mr-1"></i> 订阅
                            </a>
                        </div>
                    </div>
                    
                    <!-- 结果项3 -->
                    <div class="border-b border-gray-200 pb-4">
                        <h4 class="text-xl font-medium text-blue-600 mb-2">
                            <a href="detail.html">大型商业综合体消防安全管理规定（2023年修订版）</a>
                        </h4>
                        <p class="text-gray-700 mb-2 line-clamp-2">本规定适用于建筑面积超过2万平方米的商业综合体，规范了消防安全责任人设置、消防设施维护保养、消防演练频率、人员疏散预案等内容，明确了商业综合体经营单位的消防安全主体责任...</p>
                        <div class="flex flex-wrap text-sm text-gray-600 gap-3">
                            <span><i class="fas fa-user mr-1"></i> 国务院消防安全委员会</span>
                            <span><i class="fas fa-building mr-1"></i> 应急管理部</span>
                            <span><i class="fas fa-calendar mr-1"></i> 2023-03-01</span>
                            <span><i class="fas fa-fire mr-1"></i> 热度: 2105</span>
                            <span class="text-orange-500"><i class="fas fa-tag mr-1"></i> 政府文件</span>
                        </div>
                        <div class="flex mt-2">
                            <a href="detail.html" class="text-blue-500 hover:text-blue-700 mr-4">
                                <i class="fas fa-eye mr-1"></i> 查看
                            </a>
                            <a href="#" class="text-gray-500 hover:text-blue-500">
                                <i class="fas fa-bookmark mr-1"></i> 订阅
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="flex justify-center mt-6">
                    <nav class="flex space-x-1">
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        <a href="#" class="px-3 py-1 rounded border border-blue-500 bg-blue-500 text-white">1</a>
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">2</a>
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">3</a>
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">4</a>
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">5</a>
                        <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </div>
        </main>
        
        <!-- 底部版权信息 -->
        <footer class="bg-gray-800 text-white py-6 mt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <img src="https://via.placeholder.com/120x40?text=火调知识库" alt="Logo" class="h-10">
                        <p class="mt-2 text-gray-400">© 2023 火灾调查知识库平台 版权所有</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fas fa-envelope text-xl"></i>
                        </a>
                    </div>
                    <div class="mt-4 md:mt-0 text-gray-400">
                        <p>联系电话: 010-12345678</p>
                        <p>邮箱: contact@firekb.com</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-700 text-center text-gray-400">
                    <p>消防部门指定火灾调查技术服务平台</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 简单的Vue应用，如有需要可以扩展
        const app = Vue.createApp({
            data() {
                return {
                    // 数据可以在这里定义
                }
            },
            methods: {
                // 方法可以在这里定义
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 